<template>
  <div>
    <modal-view title="卡券模板编辑" ref="modalViewRef" width="700px" :before-submit="beforeSubmit"
      :hidden-submit="formData.Id != 0" @close="close">
      <el-form ref="formRef" label-width="80px" :model="formData" :rules="rules" label-position="left" size="small">

        <el-tabs>
          <el-tab-pane label="基本设置">
            <div class="page-tabbody">
              <cmp-card style="margin-bottom:10px" :card-data="cmpData"></cmp-card>
              <el-form-item label="编号">
                <el-input v-model="formData.Id" placeholder="自动生成" disabled></el-input>
              </el-form-item>
              <!-- <el-form-item label="绑定门店">
          <select-load v-model="formEdit.CmpId" code="Id" name="Name" placeholder="点击选择门店" popover-width="300px" is-paging
            :remote-method="remoteMethod">
            <template #table-column>
              <el-table-column prop="Name" label="门店" min-width="100"></el-table-column>
            </template>
          </select-load>
        </el-form-item> -->
              <el-form-item label="卡券名称" prop="CouponName">
                <el-input v-model="formData.CouponName"></el-input>
              </el-form-item>
              <el-form-item label="直减">
                <el-input-number v-model="formData.DiscountFee" :min="0" :precision="2" :step="0.1" />
              </el-form-item>
              <el-form-item label="有效期类型">
                <el-radio-group v-model="formData.ValidType">
                  <el-radio-button v-for="item of VALID_TYPE.array" :label="item.code">
                    {{ item.name }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <template v-if="VALID_TYPE.getCode('TJ') == formData.ValidType">
                <el-form-item label="有效期">
                  <el-date-picker value-format="YYYY-MM-DD" v-model="formData._validDate" type="daterange" />
                </el-form-item>
              </template>
              <template v-else-if="VALID_TYPE.getCode('TY') == formData.ValidType">
                <el-form-item label="有效期天数">
                  <el-input-number v-model="formData.ValidDayNum" :min="0" :precision="0" :step="1" />
                </el-form-item>
              </template>
              <el-form-item label="库存">
                <el-input-number v-model="formData.StockCount" :min="0" :precision="0" :step="1" />
              </el-form-item>
              <el-form-item label="每人限领数">
                <el-input-number v-model="formData.LimitCount" :min="0" :precision="0" :step="1" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="补充信息">
            <div class="page-tabbody" v-loading="projectLoading">
              <wangeditor-vue v-model="project" :doc-type="docType">
              </wangeditor-vue>
            </div>
          </el-tab-pane>
        </el-tabs>

      </el-form>
    </modal-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { queryGet } from "@/utils/api";
import { CmpDataClass } from "@/model/Cmp";
export default defineComponent({
  name: "ECardRuleModalView",
})
</script>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import ModalView from "@/components/ModalView";
import { appAction } from "@/store/app";
import { docType, ECardRuleDataClass, VALID_TYPE } from "@/model/ECardRule";
import { request } from "@/utils/axios";
import CmpCard from "@/views/pages/Cmp/CmpCard.vue";
import SelectLoad from "@/components/SelectLoad";
import WangeditorVue from "@/components/WangeditorVue";

let emit = defineEmits<{
  (e: "close"): void;
  (e: "submit"): void
}>()

/**
 * 弹框
 */
let modalViewRef = ref();

/**
 * 表单
 */
let formRef = ref();

/**
 * 表单
 */
let formData = ref<ECardRuleDataClass>(new ECardRuleDataClass({}));

/**
 * 公司信息
 */
let cmpData = ref<CmpDataClass>(new CmpDataClass({}));

/**
 * 表单验证
 */
let rules = reactive({
  CouponName: [{ required: true, message: '当前项为必填项', trigger: 'blur' }],
})

/**
 * 页面展示
 */
function show(cmpDataProps: any, data?: any,) {
  formData.value = new ECardRuleDataClass(data || {});
  cmpData.value = new CmpDataClass(cmpDataProps);

  if (formData.value.Id) {
    getProject();
  }

  /**
   * 打开页面
   */
  modalViewRef.value.show();
}

/**
 *  保存前校验
 */
function beforeSubmit(): Promise<void> {
  return new Promise((resolve, reject) => {
    formRef.value.validate()
      .then(() => {

        let url = "";
        if (formData.value.Id) {
          //存在为修改
          url = "/" + docType + "/Update";
        } else {
          //不存在ID 为更新
          url = "/" + docType + "/Add";
        }

        //数据提交
        request(url, Object.assign({}, formData.value, {
          CmpId: cmpData.value.Id,
          Project: project.value
        }))
          .then(() => {
            ElMessage.success("表单数据保存成功");
            emit("submit");
            resolve();
          })
          .catch(() => {
            appAction.resetPageuuid();
            reject();
          })
      })
      .catch(reject)
  })
}

/**
 * 关闭页面
 */
function close() {
  emit("close")
}

/**
 * 获取门店信息
 */
function remoteMethod(para: any): Promise<{ dataList: any[], total?: number }> {
  return new Promise((resolve, reject) => {
    queryGet({
      docType: "Cmp",
      actionType: "PageList",
      apiType: "PageList"
    }, {
      Searchv: para.search,
      Start: (para.page - 1) * para.limit,
      Limit: para.limit
    })
      .then((res) => {
        resolve({
          dataList: res.List.map((item: any) => {
            return new CmpDataClass(item);
          }),
          total: res.Total
        })
      })
      .catch(reject)
  })
}
/**
 * ====================
 *  富文本相关信息
 * ====================
 */

/**
 * 项目
 */
let project = ref("");

/**
 * 富文本loading
 */
let projectLoading = ref(false);

/**
 * 获取项目信息
 */
function getProject() {
  projectLoading.value = true;
  queryGet({
    docType: "ECardRuleProject",
    apiType: "Single"
  }, {
    "Id": formData.value.Id
  })
    .then((res) => {
      project.value = res.Content || "";
    })
    .finally(() => {
      projectLoading.value = false;
    })
}

/**
 * ====================
 *  页面初始化
 * ====================
 */
/**
 * 导出
 */
defineExpose({
  show
})

</script>

<style lang="less" scoped>
.page-tabbody {
  height: 430px;
}
</style>